<!-- 收件地址-->
<template>
	<div class="address-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<van-pull-refresh
			v-model="refreshing"
			success-text="刷新成功"
			@refresh="onRefresh"
		>
			<van-list
				v-if="addressList.length > 0"
				v-model="loading"
				:finished="finished"
				finished-text="没有更多了"
				@load="onLoad"
			>
				<div
					v-for="(item, index) in addressList"
					:key="item.Id"
					class="address-item"
				>
					<van-row type="flex">
						<van-col span="20">
							<div class="addAddress-info-panel">
								<!-- <div class="radio" v-show="item.IsDefault">
									<van-image
										width="100%"
										height="100%"
										:src="require('../../assets/imgs/radio.png')"
									>
									</van-image>
								</div>
								<div v-show="!item.IsDefault" class="radio radio-no"></div> -->
								<div class="radio" v-show="!item.IsDefault" @click="item.IsDefault = !item.IsDefault">
									<van-image
										width="100%"
										height="100%"
										:src="require('../../assets/imgs/radio.png')"
									>
									</van-image>
								</div>
								<div v-show="item.IsDefault" class="radio radio-no" @click="item.IsDefault = !item.IsDefault">
									<van-image
										width="100%"
										height="100%"
										:src="require('../../assets/imgs/radio2.png')"
									>
									</van-image>
								</div>
								<div class="addAddress-info">
									<div class="addAddress-name-tel limit-one-line">
										{{ item.ReceivingName }}&emsp;{{ item.MobileNo }}
									</div>
									<div class="addAddress-content limit-one-line">
										{{ item.FullAddress }}
									</div>
								</div>
							</div>
						</van-col>
						<van-col span="4">
							<div class="address-edit" @click="goAddAddress(index)">编辑</div>
						</van-col>
					</van-row>
				</div>
			</van-list>
			<div v-else class="default-page">
				<default-page :hint="hint"></default-page>
			</div>
		</van-pull-refresh>
		<div class="addAddress">
			<button class="btn main-btn addAddress-btn" @click="goAddAddress(-1)">
				新增收货地址
			</button>
		</div>
	</div>
</template>

<script>
import { Toast } from 'vant'

import NavBar from '../../components/NavBar.vue'
import DefaultPage from '../../components/DefaultPage.vue'

import { address_api } from '../../api/index.js'

export default {
	name: 'addresslist',
	components: {
		NavBar,
		DefaultPage,
	},
	data() {
		return {
			refreshing: false,
			loading: false,
			finished: false,

			title: '选择收件地址',
			hint: '暂无收件地址',
			addressList: [],
			pageIndex: 1,
		}
	},
	activated() {
		this.getAddressList(false)
	},
	methods: {
		onLoad() {
			setTimeout(() => {
				if (this.refreshing) {
					this.pageIndex = 1
					// this.addressList = [];
					Toast('刷新成功')
				} else {
					this.pageIndex++
				}

				this.getAddressList()

				this.loading = false
			}, 1000)
		},
		onRefresh() {
			this.loading = true
			this.onLoad()
		},
		getAddressList(is_push = true) {
			let data = {
				PageIndex: this.pageIndex,
				PageSize: 10,
			}
			address_api.getUserReceivingAddressList(data, (res) => {
				console.log('getAddressList', res)
				if (this.refreshing || !is_push) {
					this.addressList = res
				} else {
					this.addressList.push(...res)
				}
				this.refreshing = false
				if (res.length < 20) {
					this.finished = true //已全部加载
				}
			})
		},
		//去添加 / 编辑 地址
		goAddAddress(i) {
			let id = 0 //0新增，大于0编辑
			let address = {
				linkman: '',
				mobile: '',
				province: {
					value: '',
					Ids: [],
				},
				address: '',
				postalCode: '',
			}
			let addressIds = []

			if (i >= 0) {
				//编辑
				let addressinfo = this.addressList[i]
				id = addressinfo.Id
				address.linkman = addressinfo.ReceivingName
				address.mobile = addressinfo.MobileNo
				address.province = {
					value:
						addressinfo.ProvinceName +
						' - ' +
						addressinfo.CityName +
						' - ' +
						addressinfo.DistrictName,
					Ids: [addressinfo.Province, addressinfo.City, addressinfo.District],
				}

				address.address = addressinfo.CAddress
				address.postalCode = ''
			}

			this.$router.push({
				name: 'addressedit',
				params: {
					id: id,
					address: address,
				},
			})
			//this.$router.push('/addressedit/' + id)
		},
	},
}
</script>

<style scoped>
.address-panel {
	width: 100%;
	height: 100vh;
	padding-top: 0.88rem;
	background-color: #f6f5fb;

	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.van-pull-refresh {
	min-height: calc(100vh - 0.88rem);
}

.default-page {
	width: 100%;
	min-height: calc(100vh - 0.88rem);
	background: #ffffff;
}

.address {
	min-height: calc(100vh - 0.88rem);
	padding-bottom: constant(safe-area-inset-bottom);
}

.addAddress {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
}

.addAddress-btn {
	margin-bottom: 0.4rem;
}

.address-item {
	background-color: #ffffff;
}

.addAddress-info-panel {
	width: 100%;
	height: 1.56rem;
	display: flex;
	align-items: center;
}

.radio {
	width: 0.36rem;
	height: 0.36rem;
	min-width: 0.36rem;
	min-height: 0.36rem;

	margin: 0 0.2rem;
}

.radio-no {
	border-radius: 50%;
	border: 0.02rem solid rgba(0, 0, 0, 0.5);
}

.addAddress-info {
	width: calc(100% - 0.76rem);
	height: 100%;
	padding: 0 0.1rem 0 0.04rem;
}

.addAddress-name-tel {
	margin-top: 0.32rem;
	height: 0.44rem;
	font-size: 0.32rem;
	font-family: PingFangSC-Semibold, PingFang SC;
	font-weight: 600;
	color: #262626;
	line-height: 0.44rem;
}

.addAddress-content {
	margin-top: 0.12rem;
	height: 0.4rem;
	font-size: 0.28rem;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 0.4rem;
}

.address-edit {
	text-align: center;
	height: 1.56rem;
	font-size: 0.28rem;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #666666;
	line-height: 1.56rem;
	position: relative;
}

.address-edit::after {
	content: '';
	position: absolute;
	left: 0;
	top: calc(50% - 0.4rem);

	width: 0.02rem;
	height: 0.8rem;
	background: #e5e5e5;
	border-radius: 0.02rem;
}
</style>
